<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>查看菜谱</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <#include "../../include/layui.ftl" />
    <style>
        .layui-table-cell {
            height: auto;
        }
    </style>
</head>
<body>

  <div class="layui-fluid">
      <div class="layui-carousel" id="carouselDiv" lay-filter="test1">
          <div carousel-item id="carouselContent" style="text-align: center;">
              <div>
                  <table id="lay-table1" class="layui-table"></table>
              </div>
              <div>
                 <table id="lay-table2" class="layui-table" ></table>
              </div>
              <div>
                  <table id="lay-table3" class="layui-table"></table>
              </div>
              <div>
                  <table id="lay-table4" class="layui-table"></table>
              </div>
          </div>
      </div>
  </div>
  <script>
      layui.config({
          base: '${path}/plug-in/layuiadmin/' //静态资源所在路径
      }).extend({
          index: 'lib/index' //主入口模块
      }).use(['index','table','jquery','carousel'],function () {
          var  $ = layui.$,table = layui.table,carousel = layui.carousel;
          var opt = {
              elem: '#carouselDiv'
              ,arrow: 'hover' //始终显示箭头
              ,full:true
              ,autoplay:false
              ,indicator:"none"
          };
       
          var ins = carousel.render(opt);
          $.getJSON("/console/checkNote/rewrite/getRecipes",{checkId:parent.checkId},function(rep){
              $.each(rep.data,function(i,item){
                  var title = "第"+(i+1)+"周菜谱（"+item.startTime+" - "+item.endTime+"）";
                  var tableData = makeTableData(item.recipess);
                  var t = table.render({
                      elem: '#lay-table'+(i+1)
                      ,title:title
                      ,cols: [
                          [{field: 'xx',title:"<b>"+title+"</b>",align:"center",colspan:5}],
                          [ //表头
                          {field: 'time', title: '时间', width:"20%", align:"center"}
                          ,{field: 'breakfast', title: '早餐', width:"20%" ,align:"center"}
                          ,{field: 'lunch', title: '中餐', width:"20%",align:"center"}
                          ,{field: 'dinner', title: '晚餐', width:"20%",align:"center"}
                          ,{field: 'mealAddition', title: '加餐', width: "20%",align:"center"}
                          ]]
                      ,height: 'full-50'
                      ,data:tableData
                      ,toolbar: true
                      ,defaultToolbar:['print']
                  });
              });
          });
      });

      function makeTableData(recipess){
          var tableData = [];
          for (var j = 0;j < recipess.length; j++) {
              var data = recipess[j];
              var breakfast =  data.breakfast,lunch = data.lunch,
                  dinner = data.dinner,mealAddition = data.mealAddition;
              var maxLen = Math.max.apply(null,[breakfast.length,lunch.length,dinner.length,mealAddition.length]);
              var td1 = [],td2 = [],td3 = [],td4 = [];
              for (var i = 0;i < maxLen; i++) {
                  if (i < breakfast.length){
                      td1.push(breakfast[i].name);
                  }
                  if (i < lunch.length){
                      td2.push(lunch[i].name);
                  }
                  if (i < dinner.length){
                      td3.push(dinner[i].name);
                  }
                  if (i < mealAddition.length){
                      td4.push(mealAddition[i].name);
                  }
              }
              var row = {
                  time:data.time,
                  breakfast:td1.join("<br/>"),
                  lunch:td2.join("<br/>"),
                  dinner:td3.join("<br/>"),
                  mealAddition:td4.join("<br/>")
              };
              tableData.push(row);
          }
          return tableData;
      }
  </script>

</body>
</html>
